<template>
	<view>
		<!-- 顶部自定义导航 -->
		<tn-nav-bar fixed :isBack="false" :bottomShadow="false">
			<view class="custom-nav tn-flex tn-flex-col-center tn-flex-row-left">
				<!-- 返回按钮 -->
				<view v-if="iconShow" class="custom-nav__back" @tap.stop="toBack">
					<view :class="[`tn-icon-${iconLeft}`]"></view>
				</view>
				<!-- 搜索框 -->
				<view v-if="searchShow" class="custom-nav__search tn-flex tn-flex-col-center tn-flex-row-center">
					<view
						class="custom-nav__search__box tn-flex tn-flex-col-center tn-flex-row-left tn-color-gray--dark">
						<view class="custom-nav__search__icon tn-icon-search"></view>
						<view class="custom-nav__search__text">{{ searchText }}</view>
					</view>
				</view>
				<view v-else class="custom-nav__title">
					<text>{{ title }}</text>
				</view>
				<view class="custom-nav__right">
					<view v-if="iconHomeShow" :class="[`tn-icon-${iconHome}`]" @tap.stop="navIndex"></view>
					<block v-if="iconRightItems.length > 0" v-for="(item,index) in iconRightItems" :key="index">
						<view :class="[`tn-icon-${item.icon}`]"></view>
					</block>
				</view>
			</view>
		</tn-nav-bar>
	</view>
</template>

<script>
	import page_mixin from '@/mixins/page_mixin.js'
	const app = getApp();
	export default {
		name: 'dawnBar',
		props: {
			// 标题
			title: {
				type: String,
				default: ''
			},
			// 左边图标
			iconLeft: {
				type: String,
				default: 'left-fill'
			},
			iconHome: {
				type: String,
				default: 'home-love-fill'
			},
			// 是否显示图标
			iconHomeShow: {
				type: Boolean,
				default: true
			},
			// 右边图标
			iconRightItems: {
				type: Array,
				default () {
					return []
				}
			},
			// 是否显示图标
			iconShow: {
				type: Boolean,
				default: true
			},
			searchShow: {
				type: Boolean,
				default: false
			},
			searchText: {
				type: String,
				default: "请输入关键字"
			},
		},
		mounted() {

		},
		methods: {
			// 点击左上角返回按钮时触发事件
			toBack() {
				console.log("goBack");
				// 通过判断当前页面的页面栈信息，是否有上一页进行返回，如果没有则跳转到首页
				const pages = getCurrentPages()
				if (pages && pages.length > 0) {
					const firstPage = pages[0]
					if (pages.length == 1 && (!firstPage.route || firstPage.route != 'main/index/index?init=no')) {
						uni.switchTab({
							url: '/main/index/index?init=no'
						})
					} else {
						uni.navigateBack({
							delta: 1
						})
					}
				} else {
					uni.switchTab({
						url: '/main/index/index?init=no'
					})
				}
			},
			// 跳转回首页
			navIndex() {
				uni.switchTab({
					url: '/main/index/index?init=no'
				})
				// 通过判断当前页面的页面栈信息，是否有上一页进行返回，如果没有则跳转到首页
				// const pages = getCurrentPages()
				// if (pages && pages.length > 0) {
				// 	const indexPath = this.indexPath || '/main/index/index'
				// 	const firstPage = pages[0]
				// 	if (pages.length == 1 && (!firstPage.route || firstPage.route != indexPath.substring(1, indexPath
				// 			.length))) {
				// 		uni.reLaunch({
				// 			url: indexPath
				// 		})
				// 	} else {
				// 		uni.navigateBack({
				// 			delta: 1
				// 		})
				// 	}
				// } else {
				// 	uni.reLaunch({
				// 		url: indexPath
				// 	})
				// }
			}
		}
	}
</script>

<style lang="scss" scoped>
	/* 自定义导航栏内容 start */
	.custom-nav {
		height: 100%;
		background-color: $dawn-theme-color;
		color: $dawn-nav-color;

		&__back {
			// margin: auto 5rpx;
			display: flex;
			align-items: center;
			justify-content: left;
			flex-basis: 10%;
			// padding: 20rpx 40rpx 20rpx 30rpx;
			// padding: 20rpx 0rpx 20rpx 20rpx;
			padding-left: 30rpx;
			font-size: $dawn-nav-icon;
		}

		&__title {
			flex-basis: 80%;
			width: 100%;
			height: 100%;
			font-weight: bolder;
			font-size: $dawn-font-size-lg;
		}

		&__search {
			// flex-basis: 90%;
			flex-basis: 45%;
			width: 100%;
			height: 100%;

			&__box {
				width: 100%;
				height: 60%;
				padding: 28rpx 0;
				// margin: 0 30rpx;
				margin: 0 10rpx;
				border-radius: 60rpx;
				font-size: 24rpx;
				background-color: #FFFFFF;
				border: 1rpx solid #F8F7F8;
			}

			&__icon {
				padding-right: 10rpx;
				margin-left: 20rpx;
				font-size: 30rpx;
			}

			&__text {
				color: $dawn-color-grey;
			}
		}

		&__right {
			display: flex;
			align-items: center;
			justify-content: end;
			// margin: auto 5rpx;
			flex-basis: 10%;
			// padding: 20rpx 0rpx 20rpx 0rpx;
			padding-right: 30rpx;
			font-size: $dawn-nav-icon;
		}
	}

	/* 自定义导航栏内容 end */
</style>